<template>
  <div class="px-3.5">
    <div class="bg-gray-100 rounded-md p-2" style="font-family: PingFang SC">
      <ul class="flex justify-around text-4.5 channel-list">
        <li>
          <router-link to="/category" class="flex items-center">
            <img
              src="https://m.360buyimg.com/babel/jfs/t20280623/292024/6/16377/8116/685a772fF14a73a3e/907ab1a4b49a4ba6.png"
              alt=""
              style="width: 21px; height: 21px"
            />
            <span class="ml-1">夺宝岛</span>
          </router-link>
        </li>
        <li>
          <router-link to="/category" class="flex items-center">
            <img
              src="https://m.360buyimg.com/babel/jfs/t20280622/318439/8/11500/12943/6858e5aaF2d7f3499/36e067da0ed3d2da.png"
              alt=""
              style="width: 21px; height: 21px"
            />
            <span class="ml-1">夺宝岛</span>
          </router-link>
        </li>
        <li>
          <router-link to="/category" class="flex items-center">
            <img
              src="https://m.360buyimg.com/babel/jfs/t20280623/292024/6/16377/8116/685a772fF14a73a3e/907ab1a4b49a4ba6.png"
              alt=""
              style="width: 21px; height: 21px"
            />
            <span class="ml-1">夺宝岛</span>
          </router-link>
        </li>
        <li>
          <router-link to="/category" class="flex items-center">
            <img
              src="https://m.360buyimg.com/babel/jfs/t20280629/311932/40/13457/9162/6862891bFf8bac966/6b33eb2f5fb62a5b.png"
              alt=""
              style="width: 21px; height: 21px"
            />
            <span class="ml-1">夺宝岛</span>
          </router-link>
        </li>
        <li>
          <router-link to="/category" class="flex items-center">
            <img
              src="https://m.360buyimg.com/babel/jfs/t20280623/292024/6/16377/8116/685a772fF14a73a3e/907ab1a4b49a4ba6.png"
              alt=""
              style="width: 21px; height: 21px"
            />
            <span class="ml-1">夺宝岛</span>
          </router-link>
        </li>
        <li>
          <router-link to="/category" class="flex items-center">
            <img
              src="https://m.360buyimg.com/babel/jfs/t20280623/292024/6/16377/8116/685a772fF14a73a3e/907ab1a4b49a4ba6.png"
              alt=""
              style="width: 21px; height: 21px"
            />
            <span class="ml-1">夺宝岛</span>
          </router-link>
        </li>
        <li>
          <div
            to="/category"
            class="flex items-center cursor-pointer"
            @click="isOpenDrawer = true"
          >
            <img
              src="https://img11.360buyimg.com/img/jfs/t1/306209/32/11578/822/68528937Fd5987cb3/31367a9839e0121c.png"
              alt=""
              style="width: 21px; height: 21px"
            />
            <span class="ml-1">全部频道</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="mt-2">
      <el-row>
        <el-col :span="12">
          <div class="border-rounded-2xl overflow-hidden">
            <el-carousel height="165.5px">
              <el-carousel-item v-for="item in 4" :key="item" class="pos-relative">
                <el-image
                  src="https://img1.360buyimg.com/da/jfs/t1/293787/2/20289/76500/6883b157Fd58cd837/0e83d00ba750b517.png"
                  style="height: 100%; width: 100%"
                  fit="cover"
                ></el-image>
                <div class="pos-absolute text-white" style="top: 10%; left: 6.5%">
                  <h3 class="small justify-center text-xl font-600" text="2xl">
                    品质精选
                  </h3>
                  <p class="text-xl font-600">高清画质</p>
                  <span class="text-sm">低价好物抢不停</span>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="pl-2">
            <div class="bg-gray-100 border-rounded-xl" style="background-color: #f7f8fc">
              <div class="">
                <div class="py-2 px-3.5">
                  <router-link to="/" class="flex items-center justify-between">
                    <span class="text-md font-600">国家补贴 × 百亿补贴</span>
                    <i class="text-gray-500 text-3.5">官方限时补</i>
                  </router-link>
                </div>
              </div>
              <div class="flex justify-between px-2 pb-2">
                <div class="w-1/3 text-center">
                  <router-link to="/" class="block text-center">
                    <div class="w-full flex justify-center">
                      <img
                        src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t20280525/298752/1/10347/73367/68340a6bFcb4b822e/457f758e90d64ee0.jpg"
                        style="width: 86px; height: 86px"
                        alt=""
                      />
                    </div>
                    <span class="text-red-500 text-3.5 font-600"><i>￥</i>350</span>
                    <p class="text-3 text-red-500">已补23.7元</p>
                  </router-link>
                </div>
                <div class="w-1/3 text-center">
                  <router-link to="/" class="block text-center">
                    <div class="w-full flex justify-center">
                      <img
                        src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t20280612/298900/24/15468/33877/684bd2a6Fdb6c3f48/7510d76f66c01499.jpg"
                        style="width: 86px; height: 86px"
                        alt=""
                      />
                    </div>
                    <span class="text-red-500 text-3.5 font-600"><i>￥</i>350</span>
                    <p class="text-3 text-red-500">已补23.7元</p>
                  </router-link>
                </div>
                <div class="w-1/3 text-center">
                  <router-link to="/" class="block text-center">
                    <div class="w-full flex justify-center">
                      <img
                        src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t20280525/298752/1/10347/73367/68340a6bFcb4b822e/457f758e90d64ee0.jpg"
                        style="width: 86px; height: 86px"
                        alt=""
                      />
                    </div>
                    <span class="text-red-500 text-3.5 font-600"><i>￥</i>350</span>
                    <p class="text-3 text-red-500">已补23.7元</p>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="flex justify-between gap-3">
      <div class="flex justify-between mt-3 gap-3 w-1/2">
        <div
          class="bg-gray-100 border-rounded-xl w-2/3"
          style="background-color: #f7f8fc"
        >
          <div class="">
            <div class="py-2 px-3.5">
              <router-link to="/" class="flex items-center justify-between">
                <span class="text-md font-600"> 百亿补贴</span>
                <i class="text-gray-500 text-3.5">官方限时补</i>
              </router-link>
            </div>
          </div>
          <div class="flex justify-center px-2 pb-2">
            <div class="w-1/2 text-center">
              <router-link to="/" class="block text-center">
                <div class="w-full flex justify-center">
                  <img
                    src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t20280525/298752/1/10347/73367/68340a6bFcb4b822e/457f758e90d64ee0.jpg"
                    style="width: 86px; height: 86px"
                    alt=""
                  />
                </div>
                <span class="text-red-500 text-3.5 font-600"><i>￥</i>350</span>
                <p class="text-3 text-red-500">已补23.7元</p>
              </router-link>
            </div>
            <div class="w-1/2 text-center">
              <router-link to="/" class="block text-center">
                <div class="w-full flex justify-center">
                  <img
                    src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t20280612/298900/24/15468/33877/684bd2a6Fdb6c3f48/7510d76f66c01499.jpg"
                    style="width: 86px; height: 86px"
                    alt=""
                  />
                </div>
                <span class="text-red-500 text-3.5 font-600"><i>￥</i>350</span>
                <p class="text-3 text-red-500">已补23.7元</p>
              </router-link>
            </div>
          </div>
        </div>
        <div
          class="bg-gray-100 border-rounded-xl w-1/3"
          style="background-color: #f7f8fc"
        >
          <div class="">
            <div class="py-2 px-3.5">
              <router-link to="/" class="flex items-center justify-between">
                <span class="text-md font-600">国家补贴</span>
                <i class="text-gray-500 text-3.5"></i>
              </router-link>
            </div>
          </div>
          <div class="flex justify-center px-2 pb-2">
            <div class="text-center">
              <router-link to="/" class="block text-center">
                <div class="w-full flex justify-center">
                  <img
                    src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t20280525/298752/1/10347/73367/68340a6bFcb4b822e/457f758e90d64ee0.jpg"
                    style="width: 86px; height: 86px"
                    alt=""
                  />
                </div>
                <span class="text-red-500 text-3.5 font-600"><i>￥</i>350</span>
                <p class="text-3 text-red-500">已补23.7元</p>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="flex justify-between mt-3 gap-3 w-1/2">
        <div
          class="bg-gray-100 border-rounded-xl w-2/3"
          style="background-color: #f7f8fc"
        >
          <div class="">
            <div class="py-2 px-3.5">
              <router-link to="/" class="flex items-center justify-between">
                <span class="text-md font-600"> 百亿补贴</span>
                <i class="text-gray-500 text-3.5">官方限时补</i>
              </router-link>
            </div>
          </div>
          <div class="flex justify-between px-2 pb-2">
            <div class="w-1/2 text-center">
              <router-link to="/" class="block text-center">
                <div class="w-full flex justify-center">
                  <img
                    src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t20280525/298752/1/10347/73367/68340a6bFcb4b822e/457f758e90d64ee0.jpg"
                    style="width: 86px; height: 86px"
                    alt=""
                  />
                </div>
                <span class="text-red-500 text-3.5 font-600"><i>￥</i>350</span>
                <p class="text-3 text-red-500">已补23.7元</p>
              </router-link>
            </div>
            <div class="w-1/2 text-center">
              <router-link to="/" class="block text-center">
                <div class="w-full flex justify-center">
                  <img
                    src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t20280612/298900/24/15468/33877/684bd2a6Fdb6c3f48/7510d76f66c01499.jpg"
                    style="width: 86px; height: 86px"
                    alt=""
                  />
                </div>
                <span class="text-red-500 text-3.5 font-600"><i>￥</i>350</span>
                <p class="text-3 text-red-500">已补23.7元</p>
              </router-link>
            </div>
          </div>
        </div>
        <div
          class="bg-gray-100 border-rounded-xl w-1/3"
          style="background-color: #f7f8fc"
        >
          <div class="">
            <div class="py-2 px-3.5">
              <router-link to="/" class="flex items-center justify-between">
                <span class="text-md font-600">国家补贴</span>
                <i class="text-gray-500 text-3.5"></i>
              </router-link>
            </div>
          </div>
          <div class="flex justify-center px-2 pb-2">
            <div class="text-center">
              <router-link to="/" class="block text-center">
                <div class="w-full flex justify-center">
                  <img
                    src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t20280525/298752/1/10347/73367/68340a6bFcb4b822e/457f758e90d64ee0.jpg"
                    style="width: 86px; height: 86px"
                    alt=""
                  />
                </div>
                <span class="text-red-500 text-3.5 font-600"><i>￥</i>350</span>
                <p class="text-3 text-red-500">已补23.7元</p>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="12"> </el-col>
      <el-col :span="12"> </el-col>
    </el-row>

    <teleport to="#target-container">
      <transition name="fade">
        <div>
          <el-drawer v-model="isOpenDrawer" :direction="direction" style="z-index: 1000">
            <template #header>
              <h2 class="font-600">全部频道</h2>
            </template>
            <template #default>
              <div class="tab-box">
                <div class="tab-nav">
                  <ul class="flex flex-wrap justify-between">
                    <li class="py-2 px-3.5 active">
                      <span class="text-md font-600">生活服务</span>
                    </li>
                    <li class="py-2 px-3.5">
                      <span class="text-md font-600">生活服务</span>
                    </li>
                    <li class="py-2 px-3.5">
                      <span class="text-md font-600">生活服务</span>
                    </li>
                    <li class="py-2 px-3.5">
                      <span class="text-md font-600">生活服务</span>
                    </li>
                  </ul>
                </div>
              </div>
            </template>
          </el-drawer>
        </div>
      </transition>
    </teleport>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import type { DrawerProps } from "element-plus";
import { Wallet, EditPen, ArrowRight, FolderDelete } from "@element-plus/icons-vue";

const isOpen = ref(false);
const isOpenDrawer = ref(false);
const direction = ref<DrawerProps["direction"]>("rtl");
// 1. 使用 import.meta.glob 批量获取图片模块
// 注意：pattern 需为字面量，不能使用变量[8](@ref)
const imageModules = import.meta.glob("@/assets/icons/*.{png,jpg,jpeg,webp}", {
  eager: true,
});

// 2. 处理模块，提取 URL
const imageList = ref<any[]>([]);

// 遍历模块对象，提取默认导出（即 URL）
Object.values(imageModules).forEach((module: any) => {
  imageList.value.push(module.default); // 假设 eager: true 时，module 包含 default 属性
});
console.log(imageList.value);
const channelList = computed(() => [
  {
    title: "生活服务",
    desc: "账户余额",
    children: [
      { title: "充值中心", desc: "账户余额", icon: "" },
      { title: "家庭常备药", desc: "账户余额", icon: "" },
      { title: "护士上门", desc: "账户余额", icon: "" },
      { title: "充值中心", desc: "账户余额", icon: "" },
      { title: "在线医生", desc: "账户余额", icon: "" },
      { title: "加油卡", desc: "账户余额", icon: "" },
      { title: "云建站", desc: "账户余额", icon: "" },
      { title: "京东快递", desc: "账户余额", icon: "" },
      { title: "礼品卡", desc: "账户余额", icon: "" },
      { title: "爱回收", desc: "账户余额", icon: "" },
      { title: "京东联名卡", desc: "账户余额", icon: "" },
    ],
  },
  {
    title: "互动游戏",
    desc: "完善资料，可获更多优惠",
    children: [
      { title: "天天领好礼", desc: "账户余额", icon: "" },
      { title: "游戏", desc: "账户余额", icon: "" },
    ],
  },
  {
    title: "发现好物",
    desc: "收藏的宝贝",
    children: [
      {
        title: "电子教育",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "手机数码",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "配件中心",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "京东图书",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "游戏电竞",
        desc: "账户余额",
      },
      {
        title: "手机馆",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "装机空间",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "电脑馆",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "汽车用品",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "生鲜馆",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "生鲜馆",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "清洁馆",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "生鲜馆",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "生鲜馆",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "生鲜馆",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "生鲜馆",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "生鲜馆",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "生鲜馆",
        desc: "账户余额",
      },
    ],
  },
  {
    title: "优惠权益",
    desc: "删除账号，谨慎操作",
    children: [
      {
        title: "司法拍卖",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "企业购",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "大牌奥莱",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "黑色星期五",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "公共采购",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "早十好价",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "政府消费券",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "家电国补",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "夺宝岛",
        desc: "账户余额",
        icon: "",
      },
      {
        title: "京喜自营",
        desc: "账户余额",
      },
    ],
  },
]);
</script>

<style lang="scss" scoped>
.channel-list {
  li {
    span {
      color: #333;
      font-weight: 600;
      font-size: 16px;
    }
  }
}
.tab-box {
  .tab-nav {
    position: sticky;
    li {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        height: 3px;
        width: 35%;
        background-color: rgb(73, 72, 72);
        transform: translateX(-50%);
      }
      span {
        color: #333;
        cursor: pointer;
      }
      &.active {
        span {
          color: #f80101;
        }
        &::after {
          background-color: red;
        }
      }
    }
  }
}
</style>
